vue源码-3.模板编译

目的

模板渲染，将模板里的指令，方法，变量替换为标准的html

MVVM使用方法

// html
<div id="test">
    <p>{{ name }}</p>
    <p v-text="name1">{{ name }}</p>
    <p v-text="'name6'">{{ name }}</p>
    <p v-html="name2">{{ name }}</p>
    <p v-class="name3">{{ name }}</p>
    <p class="nameClas" v-class="name3">{{ name }}</p>
    <input type="text" v-model="name4" />
    <p v-class="name3" v-on:click="handleFn1">点我</p>
  </div>

// vue相同使用方法
const vm = new MVVM({
    el: '#test',
    data: {
      name: 'Ethan',
      name1: 'Ethan2',
      name2: '<b>我是html</b>',
      name3: 'Ethan3',
      name4: '1'
    },
    methods: {
      handleFn1 () {
        console.log(666)
      }
    }
  })

MVVM实现模板编译原理

// start数据代理
    function MVVM (options) {
      // 保存配置(等价于vue.$options)
      this.$options = options
      // 保存data(等价于vue._data)
      var data = this._data = this.$options.data
      var me = this

      Object.keys(data).forEach(key => {
        // 对指定属性实现代理
        me._proxy(key)
      })

      // ++++创建编译对象
      this.$compile = new Compile(options.el || document.body, this)
    }
    MVVM.prototype = {
      _proxy: function (key) {
        var me = this
        // 给vm添加指定属性(等价于vue.name === 'Ethan'，所以vue中就有name属性)
        Object.defineProperty(me, key, {
          configurable: false,
          enumerable: true,
          get: function proxyGetter() {
            return me._data[key]
          },
          set: function proxySetter(newVal) {
            me._data[key] = newVal
          }
        })
      }
    }
    // end数据代理

    // 编译模板
    function Compile(el, vm) {
      this.$vm = vm;
      // (等价于vue.$el)
      this.$el = this.isElementNode(el) ? el : document.querySelector(el);

      if (this.$el) {
        this.$fragment = this.node2Fragment(this.$el);
        this.init();
        this.$el.appendChild(this.$fragment);
      }
    }

    Compile.prototype = {
      // 将node转化为documentFragment
      node2Fragment: function(el) {
        var fragment = document.createDocumentFragment(), child
        // 将原生节点拷贝到fragment
        while (child = el.firstChild) {
          fragment.appendChild(child)
        }
        return fragment
      },

      // 编译documentFragment
      init: function() {
        this.compileElement(this.$fragment)
      },

      compileElement: function(el) {
        var childNodes = el.childNodes, me = this;

        [].slice.call(childNodes).forEach(function(node) {
          var text = node.textContent
          var reg = /\{\{(.*)\}\}/

          if (me.isElementNode(node)) { // 节点是元素,编译属性
            me.compile(node)
          } else if (me.isTextNode(node) && reg.test(text)) { // 节点是文字节点并匹配
            // 执行指令文字
            me.compileText(node, RegExp.$1.trim())
          }

          if (node.childNodes && node.childNodes.length) { // 节点还有子节点
            me.compileElement(node)
          }
        })
      },

      compile: function(node) {
        var nodeAttrs = node.attributes, me = this;

        [].slice.call(nodeAttrs).forEach(function(attr) {
          var attrName = attr.name
          // 判断是否有v-指令
          if (me.isDirective(attrName)) {
            var exp = attr.value;
            var dir = attrName.substring(2) // 事件名称,如on:click, html, text, bind, class, model
            // 判断是否有事件指令
            if (me.isEventDirective(dir)) {
              // 执行指令事件处理
              compileUtil.eventHandler(node, me.$vm, exp, dir)
              // 普通指令
            } else {
              // 指令处理
              compileUtil[dir] && compileUtil[dir](node, me.$vm, exp)
            }
            node.removeAttribute(attrName)
          }
        })
      },

        compileText: function(node, exp) {
          compileUtil.text(node, this.$vm, exp);
        },

        // 判断是否有v-指令
        isDirective: function(attr) {
          return attr.indexOf('v-') == 0;
        },

        // 判断是否有on指令
        isEventDirective: function(dir) {
          return dir.indexOf('on') === 0;
        },

        // 判断是否是元素
        isElementNode: function(node) {
          return node.nodeType == 1;
        },

        // 判断是否是文本
        isTextNode: function(node) {
          return node.nodeType == 3;
        }
    };

    // 指令处理集合，根据不同指令执行函数的时候传不同的参数
    var compileUtil = {
      text: function(node, vm, exp) {
        this.bind(node, vm, exp, 'text')
      },

      html: function(node, vm, exp) {
        this.bind(node, vm, exp, 'html')
      },

      model: function(node, vm, exp) {
        this.bind(node, vm, exp, 'model')

        var me = this, val = this._getVMVal(vm, exp);
        node.addEventListener('input', function(e) {
          var newValue = e.target.value;
          if (val === newValue) {
              return;
          }

          me._setVMVal(vm, exp, newValue);
          val = newValue;
        })
      },

      class: function(node, vm, exp) {
        this.bind(node, vm, exp, 'class');
      },

      // 执行绑定函数
      bind: function(node, vm, exp, dir) {
        var updaterFn = updater[dir + 'Updater'];

        updaterFn && updaterFn(node, this._getVMVal(vm, exp));

        /* new Watcher(vm, exp, function(value, oldValue) {
          updaterFn && updaterFn(node, value, oldValue);
        }); */
        },

        // 事件处理
        eventHandler: function(node, vm, exp, dir) {
          var eventType = dir.split(':')[1],
            fn = vm.$options.methods && vm.$options.methods[exp];

          if (eventType && fn) {
            node.addEventListener(eventType, fn.bind(vm), false);
          }
        },

        _getVMVal: function(vm, exp) {
          var val = vm;
          exp = exp.split('.');
          exp.forEach(function(k) {
            val = val[k];
          });
          return val;
        },

        _setVMVal: function(vm, exp, value) {
          var val = vm;
          exp = exp.split('.');
          exp.forEach(function(k, i) {
            // 非最后一个key，更新val的值
            if (i < exp.length - 1) {
                val = val[k];
            } else {
                val[k] = value;
            }
          });
        }
    };


    // 执行相应函数绑定到元素节点上
    var updater = {
        textUpdater: function(node, value) {
            node.textContent = typeof value == 'undefined' ? '' : value;
        },

        htmlUpdater: function(node, value) {
            node.innerHTML = typeof value == 'undefined' ? '' : value;
        },

        classUpdater: function(node, value, oldValue) {
            var className = node.className;
            className = className.replace(oldValue, '').replace(/\s$/, '');

            var space = className && String(value) ? ' ' : '';

            node.className = className + space + value;
        },

        modelUpdater: function(node, value, oldValue) {
            node.value = typeof value == 'undefined' ? '' : value;
        }
    };